angular.module('gesture.controller', ['gesture.service'])
    .controller("GestureCtrl", function ($scope, $http, $rootScope, $ionicActionSheet, $timeout, $state, $ionicPopup) {

        console.log("sss");

        $scope.h5lock = function () {
            new H5lock({
                chooseType: 3
            }).init();
        }
        console.log(2);
        window.H5lock = function (obj) {
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
        };


        H5lock.prototype.drawCle = function (x, y) { // 初始化解锁密码面板
            this.ctx.strokeStyle = '#CFE6FF';
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        H5lock.prototype.drawPoint = function () { // 初始化圆心
            for (var i = 0; i < this.lastPoint.length; i++) {
                this.ctx.fillStyle = '#CFE6FF';
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        }
        H5lock.prototype.drawStatusPoint = function (type) { // 初始化状态线条
            for (var i = 0; i < this.lastPoint.length; i++) {
                this.ctx.strokeStyle = type;
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.stroke();
            }
        }
        H5lock.prototype.drawLine = function (po, lastPoint) {// 解锁轨迹
            this.ctx.beginPath();
            this.ctx.lineWidth = 3;
            this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
            console.log(this.lastPoint.length);
            for (var i = 1; i < this.lastPoint.length; i++) {
                this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
            }
            this.ctx.lineTo(po.x, po.y);
            this.ctx.stroke();
            this.ctx.closePath();

        }
        H5lock.prototype.createCircle = function () {// 创建解锁点的坐标，根据canvas的大小来平均分配半径

            var n = this.chooseType;
            var count = 0;
            this.r = this.ctx.canvas.width / (2 + 4 * n);// 公式计算
            this.lastPoint = [];
            this.arr = [];
            this.restPoint = [];
            var r = this.r;
            for (var i = 0; i < n; i++) {
                for (var j = 0; j < n; j++) {
                    count++;
                    var obj = {
                        x: j * 4 * r + 3 * r,
                        y: i * 4 * r + 3 * r,
                        index: count
                    };
                    this.arr.push(obj);
                    this.restPoint.push(obj);
                }
            }
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
            for (var i = 0; i < this.arr.length; i++) {
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }
            //return arr;
        }
        H5lock.prototype.getPosition = function (e) {// 获取touch点相对于canvas的坐标
            var rect = e.currentTarget.getBoundingClientRect();
            var po = {
                x: e.touches[0].clientX - rect.left,
                y: e.touches[0].clientY - rect.top
            };
            return po;
        }
        H5lock.prototype.update = function (po) {// 核心变换方法在touchmove时候调用
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

            for (var i = 0; i < this.arr.length; i++) { // 每帧先把面板画出来
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }

            this.drawPoint(this.lastPoint);// 每帧花轨迹
            this.drawLine(po, this.lastPoint);// 每帧画圆心

            for (var i = 0; i < this.restPoint.length; i++) {
                if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
                    this.drawPoint(this.restPoint[i].x, this.restPoint[i].y);
                    this.lastPoint.push(this.restPoint[i]);
                    this.restPoint.splice(i, 1);
                    break;
                }
            }

        }
        H5lock.prototype.checkPass = function (psw1, psw2) {// 检测密码
            var p1 = '',
                p2 = '';
            for (var i = 0; i < psw1.length; i++) {
                p1 += psw1[i].index + psw1[i].index;
            }
            for (var i = 0; i < psw2.length; i++) {
                p2 += psw2[i].index + psw2[i].index;
            }
            return p1 === p2;
        }
        H5lock.prototype.storePass = function (psw) {// touchend结束之后对密码和状态的处理
            if (this.pswObj.step == 1) {
                if (this.checkPass(this.pswObj.fpassword, psw)) {
                    this.pswObj.step = 2;
                    this.pswObj.spassword = psw;
                    document.getElementById('title').innerHTML = '密码保存成功';
                    this.drawStatusPoint('#2CFF26');
                    window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));

                    var passwordxx = window.localStorage.getItem('passwordxx');
                    console.log(passwordxx);
                    window.localStorage.setItem('chooseType', this.chooseType);
                    var chooseType = window.localStorage.getItem('chooseType');
                    console.log(chooseType);
                } else {
                    document.getElementById('title').innerHTML = '两次不一致，重新输入';
                    this.drawStatusPoint('red');
                    delete this.pswObj.step;
                }
            } else if (this.pswObj.step == 2) {
                if (this.checkPass(this.pswObj.spassword, psw)) {
                    document.getElementById('title').innerHTML = '解锁成功';
                    console.log(1213);
                    this.drawStatusPoint('#2CFF26');
                    console.log(1213);
                    console.log("解锁成功");
                    //判断是否已登录 ，需不需要登录
                    console.log($rootScope.loginafter);
                    if ($rootScope.loginafter == "ture") {
                        $state.go('tab.home');
                    } else {
                        $state.go('tab.login');
                    }


                } else {
                    this.drawStatusPoint('red');

                    $ionicPopup.alert({
                        title: '解锁失败',
                        template: '请重新输入',
                        okText: '确定',
                        okType: ' button-assertive'
                    }).then(function (res) {
                        console.log(res);
                        if (res == true) {
                            //lock.reset();
                        }
                    })


                    //document.getElementById('title').innerHTML = '解锁失败1';
                    console.log(113);
                }
            } else {
                this.pswObj.step = 1;
                this.pswObj.fpassword = psw;
                document.getElementById('title').innerHTML = '请再次输入确认';
            }

        }
        H5lock.prototype.makeState = function () {
            if (this.pswObj.step == 2) {
                document.getElementById('updatePassword').style.display = 'block';
                document.getElementById('cancel').style.display = 'block';

                //document.getElementById('chooseType').style.display = 'none';
                document.getElementById('title').innerHTML = '请解锁';
            } else if (this.pswObj.step == 1) {
                //document.getElementById('chooseType').style.display = 'none';
                document.getElementById('updatePassword').style.display = 'none';
                document.getElementById('cancel').style.display = 'none';
            } else {
                document.getElementById('updatePassword').style.display = 'none';
                document.getElementById('cancel').style.display = 'none';
                //document.getElementById('chooseType').style.display = 'block';
            }
        }
        H5lock.prototype.setChooseType = function (type) {
            chooseType = type;
            init();
        }
        //重新设置解锁密码
        H5lock.prototype.updatePassword = function () {
            var  thisid=this;
            console.log(thisid);
            $scope.data = {}
            // 一个精心制作的自定义弹窗
            var myPopup = $ionicPopup.show({
                template: '<input type="password" ng-model="data.wifi">',
                title: '请输入登录密码',
                //subTitle: "",
                scope: $scope,
                buttons: [
                    {text: '取消'},
                    {
                        text: '<b>确定</b>',
                        type: 'button-assertive',
                        onTap: function (e) {
                            if (!$scope.data.wifi) {
                                //不允许用户关闭，除非他键入wifi密码
                                e.preventDefault();
                            } else {
                                return $scope.data.wifi;
                            }
                        }
                    },
                ]
            });
            myPopup.then(function (res) {

                console.log(res);

                if(res==null||res==""||res==undefined){
                    return
                }

                var userPassword = localStorage.getItem("userPassword")
                if ( userPassword==res ) {

                    window.localStorage.removeItem('passwordxx');
                    window.localStorage.removeItem('chooseType');
                    thisid.pswObj = {};
                    document.getElementById('title').innerHTML = '请设置新的解锁图案';
                    console.log(thisid);
                    thisid.reset();
                }else{
                    $ionicPopup.alert({
                        title: '密码输入错误',
                        template: '点击确定重新输入',
                        okText: '确定',
                        okType: ' button-assertive'
                    }).then(function (res) {
                        console.log(res);
                        if (res == true) {
                            H5lock.prototype.updatePassword()
                        }
                    })
                }
            });

        }

        //关闭手势解锁功能
        H5lock.prototype.cancel = function () {

            console.log(5465465);
            var  thisid=this;
            console.log(thisid);
            $scope.data = {}
            // 一个精心制作的自定义弹窗
            var myPopup = $ionicPopup.show({
                template: '<input type="password" ng-model="data.wifi">',
                title: '请输入登录密码',
                //subTitle: "",
                scope: $scope,
                buttons: [
                    {text: '取消'},
                    {
                        text: '<b>确定</b>',
                        type: 'button-assertive',
                        onTap: function (e) {
                            if (!$scope.data.wifi) {
                                //不允许用户关闭，除非他键入wifi密码
                                e.preventDefault();
                            } else {
                                return $scope.data.wifi;
                            }
                        }
                    },
                ]
            });
            myPopup.then(function (res) {

                console.log(res);

                if(res==null||res==""||res==undefined){
                    return
                }

                var userPassword = localStorage.getItem("userPassword")
                if ( userPassword==res ) {

                    window.localStorage.removeItem('passwordxx');
                    window.localStorage.removeItem('chooseType');
                    thisid.pswObj = {};
                    document.getElementById('title').innerHTML = '请设置新的解锁图案';
                    console.log(thisid);
                    thisid.reset();
                    $state.go('tab.home')
                }else{
                    $ionicPopup.alert({
                        title: '密码输入错误',
                        template: '点击确定重新输入',
                        okText: '确定',
                        okType: ' button-assertive'
                    }).then(function (res) {
                        console.log(res);
                        if (res == true) {
                            H5lock.prototype.cancel()
                        }
                    })
                }
            });

        }

        H5lock.prototype.initDom = function () {
            var wrap = document.createElement('div');
            var str = '<p style="margin-top: 30px"><h4 id="title" class="title" style="color:darkred;font-size: 26px;">绘制解锁图案</h4></p>' +
                '<a id="updatePassword" style="position: absolute;right: 134px;top: 450px;color:darkred;font-size: 26px;display:none;">忘记密码</a>' +
                '<a id="cancel" style="position: absolute;right: 107px;top: 500px;color:darkred;font-size: 26px;display:none;">关闭手势解锁</a>'+
                '<canvas id="canvas" width="350" height="350" style="display: inline-block;margin-top: 0px;"></canvas>';

            wrap.setAttribute('style', 'position: absolute;top:0;left:0;right:0;bottom:0;');
            wrap.innerHTML = str;
            var ionview = document.getElementsByTagName("ion-content")
            ionview[0].appendChild(wrap);
            //document.body.appendChild(wrap)
        }
        H5lock.prototype.init = function () {
            this.initDom();
            this.pswObj = window.localStorage.getItem('passwordxx') ? {
                step: 2,
                spassword: JSON.parse(window.localStorage.getItem('passwordxx'))
            } : {};
            this.lastPoint = [];
            this.makeState();
            this.touchFlag = false;
            this.canvas = document.getElementById('canvas');
            this.ctx = this.canvas.getContext('2d');
            this.createCircle();
            this.bindEvent();
        }
        H5lock.prototype.reset = function () {
            this.makeState();
            this.createCircle();
        }
        H5lock.prototype.bindEvent = function () {
            var self = this;
            this.canvas.addEventListener("touchstart", function (e) {
                e.preventDefault();// 某些android 的 touchmove不宜触发 所以增加此行代码
                var po = self.getPosition(e);
                console.log(po);
                for (var i = 0; i < self.arr.length; i++) {
                    if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {

                        self.touchFlag = true;
                        self.drawPoint(self.arr[i].x, self.arr[i].y);
                        self.lastPoint.push(self.arr[i]);
                        self.restPoint.splice(i, 1);
                        break;
                    }
                }
            }, false);
            this.canvas.addEventListener("touchmove", function (e) {
                if (self.touchFlag) {
                    self.update(self.getPosition(e));
                }
            }, false);
            this.canvas.addEventListener("touchend", function (e) {
                if (self.touchFlag) {
                    self.touchFlag = false;
                    self.storePass(self.lastPoint);
                    setTimeout(function () {

                        self.reset();
                    }, 300);
                }
            }, false);
            document.addEventListener('touchmove', function (e) {
                e.preventDefault();
            }, false);
            document.getElementById('updatePassword').addEventListener('click', function () {
                self.updatePassword();
            });
            document.getElementById('cancel').addEventListener('click', function () {
                self.cancel();
            });
        }


        $timeout(function () {
            console.log(1);
            $scope.h5lock()
        }, 600)


    })